<template>
  <div class="login-container">
    <div class="log-box">
      <div class="log-title">
        <h1>欢迎注册新用户</h1>
      </div>
      <div class="form-data">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="ruleForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              @click="createUserForm('ruleForm')"
              >立即注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="log-bottom">
        <el-link type="primary" @click="addUser">已有账号？登录账号</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import { doLogin, createUserFormFn } from "@/api/login.js";
export default {
  data() {
    return {
      ruleForm: {
        account: "admin",
        password: "admin",
        email: "",
        sex: 1,
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "change" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    addUser() {
      this.$router.push("/login");
    },
    createUserForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createUserFormFn(this.ruleForm).then((val) => {
            if (val.code == 200) {
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.$router.push("/login");
            } else {
              this.$message.error(val.data);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  components: {},
};
</script>
<style lang="less">
.login-container {
  background: #071332;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  .log-box {
    user-select: none;
    color: rgb(241, 237, 237);

    width: 600px;
    height: 500px;
    border-radius: 25px;
    background: #263f7e;

    .log-title {
      text-align: center;
      font-size: 25px;
    }
    .form-data {
      margin-top: 15px;
      width: 80%;
      .demo-ruleForm {
        color: rgb(241, 237, 237);
      }
    }
    .log-bottom {
      float: right;
      padding: 5px;
    }
  }
}
</style>
